<template>
  <div class="card-box">
    <div class="seach-container">
      <el-input v-model="keyword" placeholder="组织名称" clearable>
        <el-button slot="append" icon="el-icon-search" @click="getTreeData"></el-button>
      </el-input>
    </div>
    <el-tree class="tree-container" ref="tree" node-key="id" v-loading="loading" :data="treeData" :props="defaultProps"
             default-expand-all highlight-current :filter-node-method="handleFilter" @node-click="handleNodeClick"/>
  </div>
</template>
<script>
import {tree} from "@/api/tree";

export default {
  name: "DeptTreeCard",
  props: {},
  data() {
    return {
      loading: false,
      baseUrl: '/system/dept',
      keyword: undefined,
      treeData: [],
      defaultProps: {
        value: "id",
        label: 'name',
        children: 'children',
      }
    }
  },
  created() {
    this.getTreeData()
  },
  watch: {
    keyword(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    getTreeData() {
      this.loading = true
      tree(this.baseUrl, {expand: true}).then((res) => {
        this.treeData = res.data;
        this.loading = false
      })
    },
    handleFilter(val, data) {
      if (!val) return true;
      return data.label.indexOf(val) !== -1;
    },
    handleNodeClick(node) {
      this.$emit('selected', node);
    }
  }
}
</script>
<style scoped lang="scss">
.card-box {
  width: 100%;
  height: 100%;
  padding: 0;
}

.seach-container {
  margin: 5px 0;
  height: 40px;
  line-height: 40px;
}

.tree-container {
  margin: 10px auto;
  height: calc(100% - 62px);
  overflow: auto;
}
</style>
